import React from 'react';
import {Card, Table} from "antd";
import TableToolbar from "common/table/TableToolbar";
import menuColumns from "columns/MenuColumns";
import {useAppDispatch, useAppSelector} from "../../../redux/hook";
import {fetchPageData} from  "../../../redux/reducer/menuReducer";
import LogFactory from "log/LogFactory";

const log = LogFactory.getLog("MenuListComponent") ;
const MenuListComponent = () => {

    const dispatch = useAppDispatch() ;
    const state = useAppSelector(state => state.menu) ;

    if (state.status === 0){
        dispatch(fetchPageData({current: 1, pageSize: state.pageSize})) ;
    }

    if (state.status === 4){
        dispatch(fetchPageData({current: state.current, pageSize: state.pageSize})) ;
    }
    const pageOnChange = (page: number, pageSize: number) => {
        dispatch(fetchPageData({current: page, pageSize: pageSize})) ;
    } ;

    return (
        <Card
            title="菜单列表"
            extra={"其他操作"}
        >

            <TableToolbar titleContent={state.total}/>
            <Table
                loading={state.loading}
                columns={ menuColumns }
                dataSource={state.data}
                pagination={{
                    total: state.total,
                    current: state.current,
                    pageSize: state.pageSize,
                    onChange: pageOnChange
                }}

            />

        </Card>
    );
};

export default MenuListComponent;